<template>
  <div class="singer">
    <scroll ref="scroll" :listenScroll="true" :probeType="3" @scroll="touchScroll" class="singer-scroll">
      <ul class="singer-list">
        <li v-for="(items,index) in dataList" :key="index" ref="listGroup">
          <div class="top-title">{{items.name}}</div>
          <ul class="item-list">
            <li class="list" v-for="item in items.list" :key="item.id" @click="selectItem(item)">
              <div class="icon">
                <img v-lazy="item.img" alt="">
              </div>
              <div class="name">{{item.name}}</div>
            </li>
          </ul>
        </li>
      </ul>
    </scroll>
  </div>
</template>
<script>
import scroll from '../../base/scroll/scroll'
export default {
  props: {
    touchIndex: {
      type: String,
      default: '0'
    },
    dataList: {
      type: Array
    }
  },
  data () {
    return {
      scrollBox: [],
      scrollY: 0
    }
  },
  methods: {
    touchScroll(por) {
      // console.log(this.scrollBox)
      this.scrollY = -por.y
      this.$emit('scroll-top', por)
      // console.log(this.scrollBox)
      if (this.scrollY > this.scrollBox[this.scrollBox.length - 1]) {
        let index = (this.scrollBox.length - 1).toString()
        if (index !== this.touchIndex) {
          this.$emit('scroll-list', index)
        }
        let top = this.scrollBox[index / 1 + 1] - this.scrollY
        this.$emit('scroll-fixed', top)
        return
      }

      this.scrollBox.forEach((item, index) => {
        // console.log(item)
        if (this.scrollY > item && this.scrollY < this.scrollBox[index / 1 + 1]) {
          index = index.toString()
          if (index !== this.touchIndex) {
            this.$emit('scroll-list', index)
          }
          let top = this.scrollBox[index / 1 + 1] - this.scrollY
          this.$emit('scroll-fixed', top)
        }
      })
    },
    _touchJump() {
      this.$refs.scroll.scrollToElement(this.$refs.listGroup[this.touchIndex], 10)
    },
    selectItem(item) {
      this.$emit('select-singer', item)
    }
  },
  updated () {
    let _this = this
    this.$refs.listGroup.forEach(function (item, index) {
      _this.scrollBox.push(item.offsetTop)
    })
  },
  components: {
    scroll
  }
}
</script>

<style scoped lang="stylus">
  @import "../../common/styles/variable.styl"
  .singer {
    position fixed;
    width 100%;
    top: 44px;
    bottom 0px;
    .singer-scroll{
      height 100%;
      overflow hidden
    }
    .singer-list {
      .top-title {
        width 100%;
        height 30px;
        line-height: 30px;
        font-size $font-size-small
        color $color-text-d
        background-color #333;
        z-index: 9;
        padding 0 20px;
      }
      .item-list{
        padding-bottom 20px;
        .list{
          display flex;
          padding: 20px 20px 0 20px;
          .icon {
            width 50px;
            height: 50px;
            img {
              display block;
              width 50px;
              height: 50px;
              border-radius 50%;
            }
          }
          .name {
            flex 1;
            height 50px;
            line-height 50px;
            padding-left 20px;
            color $color-text-d;
            font-size $font-size-medium
          }
        }
      }
    }
  }
</style>
